<!--
* @description  : 文书表单部分内容可以快速选择模板后录入数据
* @descriptionDetail: 文书表单部分内容可以快速选择模板后录入数据
* @copyright    : 浙江烟草
* @author       : mc
* @create       : 2022-08-25 16:15:38
-->
<template>
  <view class="page">
    <theme-navbar :is-white="false" :isBack="false" backColor="#2b85e4" title="模板选择">
      <view class="nav-right-icon" @tap="onSure">
        确定
      </view>
    </theme-navbar>
    <view class="content" style="padding: 20rpx;">
      <u-radio-group style="margin: 10rpx 0rpx;" v-model="typeVal" @change="radioGroupChange">
        <u-radio :name="item.value" v-for="(item, index) in typeList" :key="index">
          {{ item.name }}
        </u-radio>
      </u-radio-group>
      <view class="tpl-lay" v-for="(item,index) in tplList" :key="index" @click="itemChoice(item)">
        <view class="tpl-title">
          <text>({{ item.docOrgAbbr }}){{ item.moduleName }}</text>
          <u-icon
            name="checkbox-mark"
            color="#2979ff"
            size="38"
            v-if="selectId == item.moduleUuid"
          ></u-icon>
        </view>
        <view class="tpl-content">
          <u-read-more show-height="300" :toggle="true" :ref="'uReadMore'+index" @open="open" @close="close">
            <u-parse :html="item.compiledContent" @load="parseLoaded(index)"></u-parse>
          </u-read-more>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import caseService from "@/service/case/case.service";
export default {
  name: "DocFormContentTep",
  props: {
    params: {
      type: Object,
      default: undefined,
    },
    fieldkey:{
      type:String,
      default:"",
    },
    formName:{
      type:String,
      default:'',
    },
  },
  data() {
    return {
      typeList: [
        {
          name: "全省",
          value: 1,
        },
        {
          name: "仅本市",
          value: 2,
        },
        {
          name: "仅本县",
          value: 3,
        },
        {
          name: "仅本人",
          value: 4,
        },
      ],
      typeVal: 1, // 默认选择本市
      tplList: [],
      selectId:"",
      selectItem:undefined,
      tmpObj:undefined,
    }
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      this.$modal.showLoading('加载中...');
      let tmp = this.$u.deepClone(this.params);
      tmp.showType = this.typeVal;
      caseService.findFieldDefaults(tmp).then(res => {
        this.$modal.hideLoading();
        if (res.success) {
          this.tplList = [...res.data,];
        } else {
          this.$u.toast('加载失败 ' + res.msg);
        }
      }).catch(err => {
        this.$modal.hideLoading();
        this.$u.toast('加载失败');
      });
    },
    itemChoice(obj) {
      this.tmpObj = obj;
      this.$u.throttle(this.setSelect, 1000, true);
    },
    setSelect(){
      if(this.tmpObj){
        this.selectId = this.tmpObj.moduleUuid;
        this.selectItem = this.tmpObj;
      }
    },
    open(){
      this.tmpObj = undefined;
      this.$u.throttle(this.setSelect, 1000, true);
    },
    close(){
      this.tmpObj = undefined;
      this.$u.throttle(this.setSelect, 1000, true);
    },
    parseLoaded(i){
      this.$refs['uReadMore' + i][0].init();
    },
    onSure(){
      if(this.selectItem == undefined){
        this.$u.toast('请选择一项');
      }else{
        this.$emit('choice', {
          data:this.selectItem,
          key:this.fieldkey,
          formName:this.formName,
        });
      }
    },
    radioGroupChange(e) {
      console.log(e);
      this.initData();
    },
  },
}
</script>

<style scoped lang="scss">
	.nav-right-icon {
		padding-right: 15px;
		color: #FFF;
	}

	.tpl-lay {
		display: flex;
		width: 100%;
		padding: 20rpx 15rpx;
		border-bottom: 1px solid $u-border-color;
		flex-direction: column;
	}

	.tpl-title {
		font-size: 30rpx;
		display: inline-flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.tpl-content {
		margin-top: 10rpx;
		font-size: 13rpx;
	}
</style>
